<template>
  <div class="container">
    <el-card>
      <sub-search @search="onSearch" @clear="onClear" @add="onAdd" title="学科" />
      <el-alert style="margin-bottom: 10px" type="info" show-icon :closable="false">
        <span slot="title">数据一共 {{ totalNum }} 条</span>
      </el-alert>
      <el-table :data="listDate" style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="subjectName" label="学科名称" />
        <el-table-column prop="username" label="创建者" />
        <el-table-column prop="addDate" label="创建日期" width="200">
          <span slot-scope="{ row }">{{ row.addDate | parseTimeByString }}</span>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <span slot-scope="{ row }">{{ row.isFrontDisplay? '是' : '否' }}</span>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="totals" label="题目数量" />
        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="{ row }">
            <el-button @click="goClassify(row)" type="text" size="small">学科分类</el-button>
            <el-button @click="goTags(row)" type="text" size="small">学科标签</el-button>
            <el-button @click="onEdit(row)" type="text" size="small">修改</el-button>
            <el-button @click="onRemove(row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="margin-top: 10px">
        <el-col :span="10">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageSetting.page"
            :page-size="pageSetting.pagesize"
            :page-sizes="[5, 10]"
            layout="prev, pager, next, sizes, jumper"
            :total="totalNum"
          />
        </el-col>
      </el-row>
      <sub-dialog :show-dialog.sync="showDialog" :sub-info="subInfo" @fresh="getSubList" />
    </el-card>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/subjects'
import subDialog from '../components/subjects-add.vue'
import subSearch from '../components/subjects-search.vue'
export default {
  components: {
    subSearch,
    subDialog
  },
  data () {
    return {
      pageSetting: {
        subjectName: '',
        page: 1,
        pagesize: 5
      },
      totalNum: 0,
      listDate: [],
      showDialog: false,
      subInfo: {}
    }
  },
  created () {
    this.getSubList()
  },
  watch: {
    showDialog (val) {
      if (!val) {
        this.subInfo = {}
      }
    }
  },
  methods: {
    async getSubList () {
      const { data } = await list(this.pageSetting)
      if (data.items.length === 0 && this.pageSetting.page !== 1) {
        --this.pageSetting.page
        const res = await list(this.pageSetting)
        this.listDate = res.data.items
        this.totalNum = res.data.counts
      } else {
        this.listDate = data.items
        this.totalNum = data.counts
      }
    },
    onSearch (name) {
      this.pageSetting.subjectName = name
      this.getSubList()
    },
    onClear () {
      // 只清空不刷新页面，方法未调用
      this.getSubList()
    },
    onAdd () {
      this.showDialog = true
    },
    onRemove (row) {
      this.$confirm('确定删除该科目?')
        .then(async () => {
          // 点击了确定
          const res = await remove(row.id)
          if (res.data.success) {
            this.$message.success('删除成功')
            this.getSubList() // 重新拉取数据
          } else {
            this.$message.error('删除失败')
          }
        })
        .catch(() => {
          this.$message({ message: '取消删除', type: 'info', duration: 1000 })
        })
    },
    goClassify (row) {
      console.log(row)
      this.$router.push({ name: 'subjects-directorys', query: { id: row.id, name: row.subjectName } })
    },
    goTags (row) {
      console.log(row)
      this.$router.push({ name: 'subjects-tags', query: { id: row.id, name: row.subjectName } })
    },
    handleSizeChange (val) {
      this.pageSetting.pagesize = val
      this.getSubList()
    },
    handleCurrentChange (val) {
      this.pageSetting.page = val
      this.getSubList()
    },
    onEdit (row) {
      this.subInfo = {
        id: row.id,
        isFrontDisplay: row.isFrontDisplay ? 0 : 1,
        subjectName: row.subjectName
      }
      this.showDialog = true
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 20px 20px;
}
</style>
